<!-- 订单列表 -->
<template>
  <div class="app-container">
    <div class="search-box">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="订单编号" placeholder="请输入订单编号">
          <el-input v-model="listQuery.order_number" maxlength="25" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="listQuery.status" placeholder="请选择订单状态">
            <el-option label="全部" value="0" />
            <el-option label="待支付" value="1" />
            <el-option label="待配送" value="2" />
            <el-option label="待收货" value="3" />
            <el-option label="已完成" value="4" />
            <el-option label="已取消" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="收货人" placeholder="请输入收货人">
          <el-input v-model="listQuery.consignee" maxlength="10" />
        </el-form-item>
        <el-form-item label="收货人手机号" placeholder="请输入收货人手机号">
          <el-input v-model="listQuery.consignee_phone" maxlength="11" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单编号" width="200">
        <template slot-scope="scope">
          {{ scope.row.order_number }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">待支付</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 2">待配送</el-tag>
          <el-tag type="info" v-if="scope.row.status == 3">待收货</el-tag>
          <el-tag type="success" v-if="scope.row.status == 4">已完成</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 5">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品总价" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.goods_sum_money }}
        </template>
      </el-table-column>

      <el-table-column label="运费" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.shiping_fee }}
        </template>
      </el-table-column>
      <el-table-column label="订单总价" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.order_sum_money }}
        </template>
      </el-table-column>
      <el-table-column label="收货人" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.consignee }}
        </template>
      </el-table-column>
      <el-table-column label="收货人手机号" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.consignee_phone }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.create_time }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" v-if="scope.row.status == 2" @click="fahuo(scope.row.id)">发货 |</el-link> 
          <el-link type="primary" @click="showDialog(scope.row)">查看</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getorderlist , sendOutGoods } from "@/api/order";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        order_number: "",
        status: "0",
        consignee: "",
        consignee_phone: "",
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //获取订单列表
      this.listLoading = true;
      getorderlist(this.listQuery)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.listLoading = false;
        });
    },
    showDialog(row){
        //查看
        this.$router.push({
            name : 'Detail',
            query: {id:row.id}
        })
    },
    fahuo(order_id){
      //发货
      this.$confirm('该订单确认发货么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendOutGoods({order_id : order_id}).then(res=>{
            if(res.code == 200){
              this.$message({
                type : 'success',
                message : res.message
              })
              this.listQuery.page = 1
              this.getList()
            }else{
              this.$message({
                type: 'info',
                message: res.message
              });  
            }
          })
        });
    },
    onSubmit(){
        //查询
        this.getList()
    },
    onReset(){
        //重置
        this.listQuery = {
            order_number: "",
            status: "0",
            consignee: "",
            consignee_phone: "",
            page: 1,
            limit: 10,
        }
        this.getList()
    }
  },
};
</script>

<style scoped>
.search-box {
  padding-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>